{include file="../application/admin/view/default/header.html" title="添加新闻" adminData=$adminData /}

<style>
    html{font-size: 22px}
    ol,li{
        list-style: none;
    }
    .breadcrumb{
        height: 45px;
        width: 140px;
        display: inline-block;
        background: #2ebaae;
        text-align: center;
        line-height: 45px;
        margin-bottom: 20px;
        border-radius: 4px;
        color: #fff;
    }
    .breadcrumb:hover{
        color: #fff !important;
    }
    .label{
        margin-bottom: 10px;
        display: inline-block;
        margin-top: 15px;
        font-size: 16px;
    }
    .file{
        display: inline-block;
        width: 120px;
        height: 40px;
        background: #2ebaae;
        border-radius: 6px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0;
    }
    #form input{
        width: 120px;
        height: 40px;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
    }
    #form{
        margin: 0;
        position: relative;
    }
    .remark{
        resize: none;
    }



.tuijian{
    height: 22px;
    margin: 20px 0 15px 0;
}
    .tuijian span {
    margin: 0;
    line-height: 22px;
    position: absolute;
}

            /* ==========================================================================
                    label标签模拟按钮         
       ========================================================================== */
       .emulate-ios-button {
            display: inline-block;
            width: 2rem;
            height: 1rem;
            background: #ccc;
            border-radius: 5rem;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            margin: 0;
            margin-left: 60px;
        }

        /* ==========================================================================
                    设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
                    translateZ来强制启用硬件渲染   
       ========================================================================== */

        .emulate-ios-button:after {
            content: '';
            display: block;
            width: .9rem;
            height: .9rem;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: .05rem;
            top: .05rem;
            -webkit-transform:translateZ(0);    
            transform:translateZ(0);
            -webkit-transition: all .3s ease;  
            transition: all .3s ease;
        }

        .emulate-ios-button:active:after {
            width: 1.1rem;
        }

      /* ==========================================================================
                    设置raw-checkbox,视觉直观比较 
       ========================================================================== */
        .raw-checkbox{
            opacity: 0;
        }

        .raw-checkbox:checked+label {
            background: #34bf49;
        }

        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
        .raw-checkbox:checked+label:after {
            left: 1.05rem;
        }

        .raw-checkbox:checked+label:active:after {
            left: .5rem;
        }


        .raw-checkbox:disabled+label {
            background: #d5d5d5;
            pointer-events: none;
        }

        .raw-checkbox:disabled+label:after {
            background: #bcbdbc;
        }

</style>
<div id="main" class="container padding-top-md text-slg">
    <div class="post clearfix" >
        <div class="clearfix">
            <a class="breadcrumb" href="/admin/news/index">后台首页</a>
        </div>
        <div class="clearfix ">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="tuijian">
                        <span class="label default col-sm-1 text-lg">设为推荐</span>
                        <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">
                        <label for="ios-checkbox" class="emulate-ios-button"></label>
                    </div>

                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">文章封面图</span>
                        <form id="form">
                            <div class="file" >
                                上传封面图
                            </div>
                            <input type="file" name="image">
                            <img id="imgurl" src="" alt="" srcset="" width="250px" style="margin-left: 150px;" >
                        </form>
                    </div>


                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">新闻标题</span>
                        <input type="text" class="col-sm-9 inp title" value="">
                    </div>
                    <div class="input-group mar btn-block">
                            <span class="label default col-sm-1 text-lg">新闻简介</span>
                            <textarea class="remark" ></textarea>
                    </div>
                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">新闻内容</span>
                        <div id="detail"></div>
                        <textarea id="text1"  class="detail none" ></textarea>
                    </div>
                    <div class="input-group mar btn-block">
                        <button class="btn btn-primary col-sm-1 addNews text-slg" style="    margin: 15px 0;" >添加</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>

<script>
    $(document).on("change","#form input",function (e) {
        upload({
            url:'upload',
            formNode:this.parentNode,
            token:'hellothisismytokenstring',
            sCallback:function (res) {
                console.log(res);
                var img = res;
                
            }
        })
        $("#imgurl").attr('src','/uploads/'+imgurl); 
    });

    var imgurl;
    function upload(params) {
        var data = new FormData(params.formNode);
        $.ajax({
            async:false,
            url:params.url,
            type:'POST',
            headers:{token:params.token},
            data:data,
            dataType:'JSON',  //定义返回结果的类型
            cache:false,
            contentType:false,
            processData:false,
            success:function (res) {
                imgurl = res;
                params.sCallback && params.sCallback(res);

            }
        });
        return imgurl;
    }
    
    $(function(){
        
    });

</script>



<script>



    $(document).ready(function(){
        var E = window.wangEditor
        var editor = new E('#detail')
        var $text1 = $('#text1')
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        editor.create()
        // 初始化 textarea 的值
        $text1.val(editor.txt.html())
        

        var Recommend = '';

        $('#ios-checkbox').click(function(){
            if($('#ios-checkbox').prop('checked')){
                Recommend = 1;
            }
            console.log(Recommend);
        })

        

        $('.addNews').on('click',function(){
            $.ajax({
                type:'POST',
                url:'/admin/news/add',
                dataType:'json',
                data:{'title':$('.title').val(),'detail':$('.detail').val(),'imgurl':imgurl,'recommend':Recommend,'remark':$('.remark').val()},
                success:function(data){
                    alert(data.msg);
                    if(!data.code){
                        window.location.href="/admin/news/index";
                    }
                },error:function(xhr){alert(xhr.responseText)}
            });
        });
    })
</script>
</html>